.btn {

	$color-default: 		#30c5c3;
	$color-primary: 		#30c5c3;
	$color-primary-unable: 	#ace8e7;
	$color-danger: 			#ff0000;

	display: inline-block;
	vertical-align: middle;
	text-align: center;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	cursor: pointer;
	outline: none;
	border: none;
	font-size: 28px;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;

	&.unable{
		cursor: not-allowed;
	}

	@mixin btn-size($fontSize, $btnHeight) {
		font-size: $fontSize;
		height: $btnHeight;
		line-height: $btnHeight;
		border-radius: $btnHeight/2;
	}

	&.btn-sm{
		@include btn-size(24px, 40px);
	}
	&.btn-md{
		@include btn-size(24px, 48px);
	}
	&.btn-lg{
		@include btn-size(28px, 56px);
	}

	

	@mixin type($color, $bgColor, $unableBgColor) {
		color: $color;
		background-color: $bgColor;

		&.unable{
			background-color: $unableBgColor;
		}

		&.outline{
			color: $bgColor;
			border: 1px solid $bgColor;
			background-color: transparent;
		}
	}

	&.btn-default{
		@include type(#fff, $color-default, none);
		
		&:hover,
		&:active{
			background-color: $color-primary;
			color: #fff;
		}

		&.unable{
			&:hover,
			&:active{
				background-color: #fff;
				color: $color-primary;
			}
		}
	}

	&.btn-primary{
		@include type(#fff, $color-primary, $color-primary-unable);
		&:hover,
		&:active{
			background-color: $color-primary;
			color: #fff;
		}

		&.unable{
			&:hover,
			&:active{
				background-color: #fff;
				color: $color-primary;
			}
		}
	}

	&.btn-danger{
		@include type(#fff, $color-danger, none);
	}

	&.btn-submit{
		@include type($color-default, #fff, #ccc);
		width: 100%;
		height: 100px;
		line-height: 100px;
		&:active{
			background-color: $color-primary;
			color: #fff;
		}

		&.unable{
			color: #fff;
			&:active{
				background-color: #ccc;
				color: #fff;
			}
		}
	}
	
	&.btn-delete{
		@include type($color-danger, #fff, #ccc);
		width: 100%;
		height: 100px;
		line-height: 100px;
		&:active{
			background-color: $color-primary;
			color: #fff;
		}

		&.unable{
			color: #fff;
			&:active{
				background-color: #ccc;
				color: #fff;
			}
		}
	}

}